.live-share{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 100;
    display: none;
    .share-box{
        width: 90%;
        height: 95%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        padding: 10px;
        border-radius: 6px;
        background-color: $white;
        overflow: hidden;
        transform-style: preserve-3d;  
        -webkit-transform-style: preserve-3d;
        @include prefixer(transform,perspective(700px) translate3d(0,-100px,0) rotateX(-45deg), moz o ms webkit);
        transform-origin: bottom;
        -webkit-transform-origin: bottom;
        opacity: 0;
        transition: transform 0.5s ease-in-out 0s,opacity 0.25s ease-in-out 0s;
        -webkit-transition: transform 0.5s ease-in-out 0s,opacity 0.25s ease-in-out 0s;
        &.open{
            @include prefixer(transform,translate3d(0,0,0) rotateX(0deg),moz o ms webkit);
            opacity: 1;
        }
        .share-close{
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 10px;
            height: 50px;
            width: 113px;
            display: block;
            border: none;
            background-size: 15px;
            text-indent: -999px;
            overflow: hidden;
            background: url(../img/I-know.png) no-repeat center;
            background-size: 100%;
        }
        .sub-close{
            width: 20px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 10px;
            border: none;
            background: transparent url(../img/live-close.png) no-repeat center;
            background-size: 100%;
            text-indent: -999px;
        }
        .help-info{
            img{
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
}